<template>
	<view class="box">
		<view class="banner">
		  <image src="../../static/zixun4.png" mode="widthFix"></image>
		</view>
    
    <!-- 资讯区域 -->
    <view class="zixun">
      <view class="zixun-title">
       <text class="zixun-text">今日资讯</text>
       <navigator url="../news/news"  open-type="navigate" class="zixun-nav">0326</navigator>
      </view>
      <view class="newzixun">
        
        <uni-list>
        		<!-- title、note设置标题和小文字 -->
        		<uni-list-item direction="row" v-for="item in info" :key="item.id" :title="item.title" :note="item.user_name + ' '+item.last_modify_date">
        			<!-- 通过v-slot:header插槽定义列表左侧的图片显示，其他内容通过List组件内置属性实现-->
        			<template v-slot:header>
        				<!-- 当前判断长度只为简单判断类型，实际业务中，根据逻辑直接渲染即可 -->
        				<image class="image-1" :src="item.images" mode="aspectFill"></image>
        			</template>
        		</uni-list-item>
        	</uni-list>
          
      </view>
    </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: [{
										"user_name": "120次阅读",
										"title": "山东妇幼保健院儿童保健科--语言特色门诊开课了",
										// "avatar": "https://img.36krcdn.com/20200410/v2_9c3331af67e64994aa97a27fffb1a380_img_png?x-oss-process=image/resize,m_mfit,w_520,h_300/crop,w_520,h_300,g_center",
				          images: '../../static/zixun1.png',
										"last_modify_date": "2021-03-25 17:11:09",
									},
                  {
                  	"user_name": "1700次阅读",
                  	"title": "《妇幼保健机构绩效考核办法》印发",
                  	// "avatar": "https://img.36krcdn.com/20200411/v2_16417a06088947debe0450950f8fc813_img_png",
                    images: '../../static/zixun7.png',
                  	"last_modify_date": "2021-02-22 17:03:18",
                  },
									{
										"user_name": "1300次阅读",
										"title": "宝妈给孩子的一份礼物-新生儿疾病筛查",
										// "avatar": "https://img.36krcdn.com/20200411/v2_16417a06088947debe0450950f8fc813_img_png",
				            images: '../../static/zixun2.png',
										"last_modify_date": "2021-02-15 17:03:18",
									}, {
										"user_name": "300次阅读",
										"title": "产妇失眠会影响哺乳",
										// "avatar": "https://img.36krcdn.com/20200410/v2_6905947498bc4ec0af228afed409f771_img_png?x-oss-process=image/resize,m_mfit,w_520,h_300/crop,w_520,h_300,g_center",
				            images: '../../static/zixun3.png',
										"last_modify_date": "2021-02-11 16:11:11",
									},
                  {
                  	"user_name": "700次阅读",
                  	"title": "40岁女性还要不要打HPV疫苗",
                  	// "avatar": "https://img.36krcdn.com/20200410/v2_6905947498bc4ec0af228afed409f771_img_png?x-oss-process=image/resize,m_mfit,w_520,h_300/crop,w_520,h_300,g_center",
                    images: '../../static/zixun5.png',
                  	"last_modify_date": "2021-01-18 16:11:11",
                  },
                  {
                  	"user_name": "67次阅读",
                  	"title": "是谁'偷走了'我的完美身材",
                  	// "avatar": "https://img.36krcdn.com/20200410/v2_6905947498bc4ec0af228afed409f771_img_png?x-oss-process=image/resize,m_mfit,w_520,h_300/crop,w_520,h_300,g_center",
                    images: '../../static/zixun6.png',
                  	"last_modify_date": "2021-01-18 16:11:11",
                  },
								]
			};
		},
		 onLoad: function (options) {
		        setTimeout(function () {
		            console.log('start pulldown');
		        }, 1000);
		        //uni.startPullDownRefresh();
		        uni.startPullDownRefresh({
		            success:function(res){
		                console.log(res);  //success 返回参数说明
		            }
		        });  //这里表示当进入页面的时候就开始执行下拉刷新动画
		    },
		    onPullDownRefresh() {
		        //监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
		        console.log('refresh');
		        setTimeout(function () {
		            uni.stopPullDownRefresh();  //停止下拉刷新动画
		        }, 1000);
		    }
	}
</script>

<style lang="less">
.box {
   display: flex;
  flex-direction: column;
 }
 .banner {
   display: flex;
  width: 100%;
  height: 100rpx;
  background-color: #ffffff;
  margin-bottom: 50%;
 }
 .banner image {
   width: 100%;
   height: 50%;
 }
 
 .zixun {
  margin-bottom: 20rpx;
 }
 .zixun-title {
  display: flex;
  justify-content: space-between;
  margin: 20rpx auto;
 }
 .zixun-text {
   font-size:34rpx ;
   font-weight: 600;
   padding-left: 10rpx;
 }
 .zixun-nav {
   font-size:24rpx ;
   padding-right: 30rpx;
 }
 .content {
 		display: flex;
 		flex-direction: column;
 		align-items: center;
 		justify-content: center;
 	}
 
 	.image-1 {
 		flex-shrink: 0;
 		margin-right: 10px;
 		width: 125px;
 		height: 75px;
 		border-radius: 6px;
 		overflow: hidden;
 		border: 1px #f5f5f5 solid;
 	}
</style>
